<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :align-center="true"
    width="60%"
    :title="`${dialogData.title}招工企业`"
  >
    <el-form
      ref="companyFormRef"
      :rules="rules"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      label-width="100px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="公司名称" prop="name">
                <el-input
                  v-model="dialogData.itemInfo.name"
                  placeholder="请填写名称"
                  clearable
                  maxlength="100"
                  show-word-limit
                  :disabled="dialogData.itemInfo.flagIdentity == 'Y'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="公司简称">
                <el-input
                  v-model="dialogData.itemInfo.sname"
                  placeholder="请填写简称"
                  clearable
                  maxlength="20"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="公司性质">
                <el-input
                  v-model="dialogData.itemInfo.natureName"
                  placeholder="请填写"
                  clearable
                  maxlength="100"
                  show-word-limit
                  :disabled="dialogData.itemInfo.flagIdentity == 'Y'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <div class="img-box">
            <UploadImg
              v-model:imageUrl="dialogData.itemInfo.logoImg"
              :disabled="dialogData.isView"
              :file-size="2"
              width="120px"
              height="120px"
            >
              <template #tip> Logo 大小不能超过 1M </template>
            </UploadImg>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属行业">
            <el-select v-model="dialogData.itemInfo.industry" placeholder="请选择所属行业" style="width: 100%">
              <el-option v-for="item in companyIndustryType" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公司类型">
            <el-select v-model="dialogData.itemInfo.companySize" placeholder="请选择公司规模" style="width: 100%">
              <el-option v-for="item in companySizeType" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工规模">
            <el-select v-model="dialogData.itemInfo.staffSize" placeholder="请选择员工规模" style="width: 100%">
              <el-option v-for="item in companyStaffSizeType" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公司网址">
            <el-input
              v-model="dialogData.itemInfo.website"
              placeholder="请填写公司网址"
              clearable
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公司介绍" maxlength="300" show-word-limit>
            <el-input v-model="dialogData.itemInfo.introduce" placeholder="请选择公司介绍" type="textarea" rows="8" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公司地址">
            <el-input
              v-model="dialogData.itemInfo.address"
              placeholder="请填写地址"
              clearable
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人">
            <el-input
              v-model="dialogData.itemInfo.contactor"
              placeholder="请填写联系人"
              clearable
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input
              v-model="dialogData.itemInfo.contactPhone"
              placeholder="请填写联系电话"
              clearable
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="opt-title-box">
            <div class="info-title">上传客户公司图片</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-scrollbar>
            <UploadImgs
              v-model:fileList="dialogData.imgfileList"
              :disabled="dialogData.isView"
              :file-size="3"
              width="160px"
              height="160px"
              :api="uploadCpyRes"
            >
              <template #tip> 大小不能超过 3M </template>
            </UploadImgs>
          </el-scrollbar>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="opt-title-box">
            <div class="info-title">上传客户公司视频</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-scrollbar>
            <UploadImgs
              v-model:fileList="dialogData.vdofileList"
              :disabled="dialogData.isView"
              :file-size="30"
              width="160px"
              height="160px"
              :api="uploadCpyRes"
            >
              <template #tip> 大小不能超过 30M </template>
            </UploadImgs>
          </el-scrollbar>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="opt-title-box">
            <div class="info-title">上传合作客户尾页</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-alert
            title="为了保证企业的合法权益，平台招聘信息的真实性，请上传与客户公司的合作协议或证明。"
            type="warning"
            :closable="false"
            show-icon
          />
          <el-scrollbar>
            <UploadImgs
              v-model:fileList="dialogData.vdofileList"
              :disabled="dialogData.isView"
              :file-size="30"
              width="160px"
              height="160px"
              :api="uploadCpyRes"
            >
              <template #tip> 大小不能超过 3M </template>
            </UploadImgs>
          </el-scrollbar>
        </el-col>
      </el-row>
      <div v-if="dialogData.isView">
        <el-divider content-position="left">创建信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建人">
              <el-input v-model="dialogData.itemInfo.createUser" placeholder="创建人" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-input v-model="dialogData.itemInfo.createDate" placeholder="创建时间" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="修改人">
              <el-input v-model="dialogData.itemInfo.updateUser" placeholder="修改人" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间">
              <el-input placeholder="修改时间" v-model="dialogData.itemInfo.updateDate" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit" :loading="btnLoading">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { CompanyClientEntity } from "@/biz/interface/companyType";
import { getCompanyInfoApi, saveCompanyApi } from "@/api/modules/cpy/client";

import { companyStaffSizeType, companyIndustryType, companySizeType } from "@/biz/datas/companyData";
import UploadImg from "@/components/Upload/Img.vue";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { uploadCpyRes } from "@/api/modules/upload";

//页面的数据
interface CompanyDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据
  isView: boolean;
  // 图片
  imgfileList: [];
  // 视频
  vdofileList: [];
  // 合作凭证
  voucherfileList: [];
  //当前的数据对象
  itemInfo: CompanyClientEntity;
  //其它的数据都继续在这里加
}
//提交按钮，避免多次提交
const btnLoading = ref(false);
//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<CompanyDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  imgfileList: [],
  vdofileList: [],
  voucherfileList: [],
  itemInfo: {
    name: "",
    sname: "",
    website: "",
    introduce: "",
    address: "",
    contactor: "",
    contactPhone: "",
    logoImg: "",
    reses: [],
    vouchers: [],
    tags: []
  }
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogData.rowData = params.rowData;
  dialogData.isView = dialogData.optType === OptEnum.VIEW;
  dialogData.title = getOptTitle(dialogData.optType);

  if (dialogData.optType === OptEnum.CREATE) {
    initItemInfo();
  } else if (dialogData.rowData && dialogData.rowData.id) {
    getItemInfo(dialogData.rowData.id);
  }

  dialogVisible.value = true;
};

// const ws = ref(workerScale)
// const fs = ref(firmScale)
// const fa = ref(firmAtt)
// const ff = ref(firmField)

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {
    name: "",
    sname: "",
    website: "",
    introduce: "",
    address: "",
    contactor: "",
    contactPhone: "",
    logoImg: "",
    reses: [],
    vouchers: [],
    tags: []
  };
  dialogData.imgfileList = [];
  dialogData.vdofileList = [];
  dialogData.voucherfileList = [];
};
//获取当前数据的详情，直接调用接口获取数据
const getItemInfo = async (id: string) => {
  if (id) {
    let { data } = await getCompanyInfoApi({ id });
    dialogData.itemInfo = data as unknown as CompanyClientEntity;

    dialogData.imgfileList.length = 0;
    let imgIdx = 1;
    if (dialogData.itemInfo.imgs) {
      dialogData.itemInfo.imgs.forEach(img => {
        dialogData.imgfileList.push({ name: imgIdx, url: img });
        imgIdx = imgIdx + 1;
      });
    }

    dialogData.vdofileList.length = 0;
    if (dialogData.itemInfo.vdos) {
      dialogData.itemInfo.vdos.forEach(vdo => {
        dialogData.vdofileList.push({ name: imgIdx, url: vdo });
        imgIdx = imgIdx + 1;
      });
    }

    dialogData.voucherfileList.length = 0;
    if (dialogData.itemInfo.vouchers) {
      dialogData.itemInfo.vouchers.forEach(vchr => {
        dialogData.voucherfileList.push({ name: imgIdx, url: vchr });
        imgIdx = imgIdx + 1;
      });
    }
  }
};

//数据较验
const rules = reactive({
  name: [{ required: true, message: "请填写名称", trigger: "blur" }]
});

// 提交数据（新增/编辑）
const companyFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  companyFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      if (dialogData.optType === OptEnum.CREATE || dialogData.optType === OptEnum.EDIT) {
        //提交数据
        dialogData.itemInfo.reses = [];
        if (dialogData.imgfileList) {
          dialogData.imgfileList.forEach(file => {
            // console.log("每个文件, ", file, file.url);
            if (file && file.url) {
              dialogData.itemInfo.reses.push(file.url);
            }
          });
        }
        if (dialogData.vdofileList) {
          dialogData.vdofileList.forEach(file => {
            // console.log("每个文件, ", file, file.url);
            if (file && file.url) {
              dialogData.itemInfo.reses.push(file.url);
            }
          });
        }
        if (dialogData.voucherfileList) {
          dialogData.voucherfileList.forEach(file => {
            // console.log("每个文件, ", file, file.url);
            if (file && file.url) {
              dialogData.itemInfo.vouchers.push(file.url);
            }
          });
        }
        let res = await saveCompanyApi({
          ...dialogData.itemInfo
        });
        if (res.data) {
          ElMessage.success({ message: `${dialogData.title}招工企业成功！` });
          //刷新列表数据
          emits("refresh-list");
          dialogVisible.value = false;
        }
      }
    } catch (error) {
    } finally {
      btnLoading.value = false;
    }
  });
};

//页面事件
const emits = defineEmits(["refresh-list"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
